<template>
  <div class="addEditArticlePageCont">
    <div class='title'>当前位置：文章审核 / 审核文章内容</div>
    <div class="addEditArticlePageMian">
      <Form ref="formAddEditArticle" :label-width="110">
        <FormItem label="所属楼盘：">
          {{cityName}}
          <span v-if="cityName&&buildingName"> - </span>
          {{buildingName}}
          <Button type="info" size="small" style="margin-left:30px;"
            v-if="rebutReason && auditStatus == '2' && name != 'viewArticleReview'"
            @click="rebutReasonSee">查看驳回原因</Button>
          <Button type="info" size="small" style="margin-left:30px;"
            @click="onAuditLog">审核记录</Button>
        </FormItem>
        <!-- <FormItem label="文章标题：" prop="articleTitle">
          {{articleTitle}}
        </FormItem> -->
        <FormItem label="文章标题：" prop="articleTags">
          {{articleTitle}}
        </FormItem>
        <FormItem label="文章正文：" prop="articleTags">
          <div v-if="articleContent" v-html="articleContent"></div>
          <div v-else v-html="newArticleContent"></div>
        </FormItem>
        <!-- <FormItem label="封面图：" class="FormItemUpload">
          <template v-if="fileList.length">
            <div class="demo-upload-list" v-for="(item, index) in fileList" :key="index">
              <img :src="item.url">
              <div class="demo-upload-list-cover">
                <Icon type="ios-eye-outline" @click="handleView(item.url)"></Icon>
              </div>
            </div>
          </template>
          <p v-else>无</p>
        </FormItem> -->

        <FormItem label="图片\视频：" class="FormItemUpload">
          <template>
            <div  v-if="preViewImg.length">
              <div class="demo-upload-list" v-for="(item, index) in preViewImg" :key="index">
                <img :src="item">
                <div class="demo-upload-list-cover">
                  <Icon type="ios-eye-outline" @click="handleView(item)"></Icon>
                </div>
              </div>
            </div>
            <div v-if="preViewVideo" class="demo-upload-list">
              <video controls="controls" :src="preViewVideo" >
                您的浏览器不支持 video 标签
              </video>
              <div class="demo-upload-list-cover">
                <Icon type="ios-eye-outline" @click="handleView(preViewVideo)"></Icon>
              </div>
            </div>
          </template>
          <p v-if="!preViewImg.length&&!preViewVideo">无</p>
        </FormItem>

        <div class="footer" v-if="$route.query.type != 'View'">
          <Button type="primary" :loading="loading" @click="onAudit">审核</Button>
        </div>
      </Form>
    </div>
    <!-- 图片放大 -->
    <preview-image :images="preViewImg" :showIndex="0" ref="preViewImage">
    </preview-image>

    <audit-modal ref="audit"></audit-modal>
    <preview-video :videoUrl="preViewVideo"  ref="preViewVideo">
    </preview-video>
    <!--流程信息-->
    <process-modal ref="process" />
  </div>
</template>
<script>
  import articleMgr from '@/biz/article/article.js'
  import auditModal from './components/audit-modal.vue'
  import previewVideo from "@/components/previewVideo.vue"
  import processModal from '@/components/biz/audit/process-modal.vue'
  
  export default {
    components: {
      auditModal,
      previewVideo,
      processModal
    },
    data() {
      return {
        preViewImg: [],
        preViewVideo:'',
        auditModal: false,
        cityName: '',
        buildingName: '',
        articleTitle: '',
        articleTags: '',
        fileList: [],
        articleContent: '',
        loading: false,
        rebutReason: null,
        auditStatus: null,
        name: null,
        newArticleContent:null
      }
    },
    methods: {
      rebutReasonSee() {
        this.$Modal.warning({
          title: '驳回原因',
          // content: this.rebutReason,
          okText: '关闭',
          render: (h) => {
            return [h('dt-info-edit-text', {
              props: {
                option: {
                  whiteSpace: 'pre-wrap',
                  wordWrap: 'break-word',
                  tooltip: false
                },
                value: this.rebutReason
              },
            })]
          }
        })
      },
      onAuditLog() {
        this.$refs.process.show({
          businessId: this.$route.query.articleId,
          auditType: 13
        })
      },
      onAudit() {
        this.$refs.audit.show({
          articleId: this.$route.query.articleId,
          auditId: this.$route.query.auditId
        })
      },
      // 图片预览
       handleView(val) {
         if(val){
          let suffix = val.split('.').pop().toLowerCase()
          if(['mp4','avi','wmv','rmvb'].indexOf(suffix)>-1){
            console.log('我是视频');
            this.preViewVideo=val
            this.preViewImg = []
            this.$refs.preViewVideo.show()
          }else{
            this.preViewImg = [val]
            this.preViewVideo=''
            this.$refs.preViewImage.show()
          }   
         }
               
      },
      // handleView(val) {
      //   this.preViewImg = [val]
      //   this.$refs.preViewImage.show()
      // },
      // 初始化获取数据
      initData() {
        this.name = this.$route.name
        articleMgr.articleGet({ articleId: this.$route.query.articleId })
          .then((res) => {
            if (res) {
              this.cityName = res.cityName
              this.buildingName = res.buildingAlias
              this.articleTitle = res.articleTitle
              this.articleTags = res.labelType
              // this.fileList = res.articleImage ? [{ url: res.articleImage }] : []
              this.articleContent = res.articleContent
              this.newArticleContent = res.newArticleContent
              this.rebutReason = res.rebutReason
              this.auditStatus = res.auditStatus

              if(res.articleImage){
                let suffix = res.articleImage.split('.').pop().toLowerCase()
                if(['mp4','avi','wmv','rmvb'].indexOf(suffix)>-1){
                  console.log('我是视频');
                  this.preViewVideo=res.articleImage
                  this.preViewImg = []
          
                }else{
                  this.preViewImg = [res.articleImage]
                  this.preViewVideo=''
                }
              }
            }
          })
          .catch((err) => {
            this.$Message.error(err)
          })
      },
    },
    computed: {},
    created() {
      // 初始化获取数据
      this.initData()
    },
    activated() {},
    deactivated() {},
    mounted() {},
    watch: {
      // "$route"(to, from) {
      //   if(to.path == "######") {
      //     this.initData();
      //   }
      // }
    },
  }
</script>
<style lang="scss" scoped>
  .addEditArticlePageCont {
    .title {
      background-color: #f5f5f5;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      padding: 0 14px 10px;
    }

    .addEditArticlePageMian {
      margin-top: 16px;
      width: 800px;
    }
  }

  .footer {
    padding-top: 16px;
    text-align: center;

    button {
      margin: 0 10px;
    }
  }

  // 上传
  .demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 4px;
  }

  .demo-upload-list img {
    width: 100%;
    height: 100%;
  }
   .demo-upload-list video {
    width: 100%;
    height: 100%;
  }

  .demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
  }

  .demo-upload-list:hover .demo-upload-list-cover {
    display: block;
  }

  .demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }

  .FormItemUpload .ivu-form-item-content {
    display: flex;
  }

  .imageSize {
    display: inline-block;
    margin-left: 16px;
    vertical-align: top;
    padding-top: 16px;
  }
</style>